<template>
  <div class="DemandAnalysisbox">
    <div class="leftbox">
      <EnterpriseTree @handleClick="handleClick"></EnterpriseTree>
    </div>
    <div class="rightbox">
      <div class="righttop">
        <el-form ref="form" label-position="left" label-width="40px">
            <el-row :gutter="20">
                <el-col :span="6">
                  <el-form-item label="日期">
                    <el-date-picker v-model="value1" type="daterange" value-format="yyyy-MM-dd" range-separator="-" 
                    size="small" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="18" style="text-align: right;">
                  <el-form-item label="">
                    <el-button size="small" @click="chongzhi">重 置</el-button>
                    <el-button type="primary" size="small" @click="gettablelist">查 询</el-button>
                  </el-form-item>
                </el-col>
            </el-row>
        </el-form>
      </div>
      <div class="rightbody">
        <div class="title">
          <div>需量分析</div>
          <div><TopTile  @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTile></div>
        </div>
        <div class="table">
          <el-table
           :size="issize"
            border
            :header-cell-style="{'text-align':'center',background:'#f5f5f5'}"
            v-loading="loading"
            height="calc(100% - 0px)"
            ref="tablecolumn"
            style="width: 100%"
            :data="tableData">
            <template slot="empty">
              <el-empty description="暂无数据"></el-empty>
            </template>
            <el-table-column
              prop="name"
              fixed
              v-if="tableData.length"
              label="设备">
            </el-table-column>
            <el-table-column v-for="dateStr in array" :key="dateStr" :label="dateStr">
              <el-table-column
                :prop="`${dateStr}demandMax`"
                width="120"
                align="right"
                label="最大需量(kW)">
              </el-table-column>
              <el-table-column
                width="170"
                align="center"
                :prop="`${dateStr}demandMaxTime`"
                label="发生时间">
              </el-table-column>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import TableColumn from '@/components/Table/index.vue'
import {exportexcel} from '@/utils/excel'
import TopTile from '@/components/TopTitle/index.vue'
import EnterpriseTree from './CheckTree.vue'
export default {
  name: 'CallPoliceIndex',
  components: {
    EnterpriseTree,
    TableColumn,
    TopTile
  },
  data() {
    return {
      value1: [],
      issize: 'medium',
      tableData: [],
      tableConfig: [],
      treevalue: [],
      array: [],
      loading:false
    };
  },

  mounted() {
    this.gettime()
  },

  methods: {
    // 树节点点击
    handleClick(val) {
      this.treevalue = val
      if (val.length) {
       this.gettablelist()
      } else {
        this.array = []
        this.tableData = []
      }
    },
    // 获取表格数据
    async gettablelist() {
      this.loadind = true
      const deviceIds = this.treevalue.map(ele => ele.id).join(',')
      const { data: { list } } = await request.get(`pio-microservice-biz/pio/demand/analyse/list?deviceIds=${deviceIds}&endTime=${this.value1[1]}&startTime=${this.value1[0]}`)
      let array = [];
      list.forEach(ele => {
        ele.demandList.forEach((item, index) => {
          array.push(item.dateStr);
          ele[`${item.dateStr}demandMax`] = item.demandMax;
          ele[`${item.dateStr}demandMaxTime`] = item.demandMaxTime;
        });
      });
      this.array = Array.from(new Set(array));
      this.tableData = list
      this.$nextTick(()=>this.$refs.tablecolumn.doLayout())
      this.loadind=false
    },
    // 调节表格密度
    command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    //重置
    chongzhi() {
      this.gettime()
      this.gettablelist()
    },
    // 导出
    daochu() {
      const deviceIds=this.treevalue.map(ele=>ele.id).join(',')
      exportexcel('pio-microservice-biz/pio/demand/analyse/excel',{
        deviceIds:deviceIds,endTime:this.value1[1],startTime:this.value1[0]
      },'需量分析')
    },
    // 刷新列表
    shuaxin() {
      this.gettablelist()
      this.$message.success('列表刷新成功')
    },
    // 获取当前时间戳
    gettime() {
      this.value1=[]
      const date = new Date()
      const year = date.getFullYear() // 年
      const mon = date.getMonth() + 1 // 月
      const month=mon<10?'0'+mon:mon
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      this.value1=[year+'-'+month+'-'+'01',year+'-'+month+'-'+day]
    },
  },
};
</script>

<style scoped>
.DemandAnalysisbox{
  height: 100%;
  padding: 10px;
  display: flex;
  .leftbox{
    width: 300px;
    background-color: #fff;
    padding: 20px;
    height: 100%;
  }
  .rightbox{
    width: calc(100% - 310px);
    height: 100%;
    margin-left: 10px;
    .righttop{
      height: 80px;
      background-color: #fff;
      padding: 20px;
      margin-bottom: 10px;
    }
    .rightbody{
      height: calc(100% - 90px);
      background-color: #fff;
      padding: 20px;
      .title{
        display:flex;
        justify-content:space-between;
      }
      .table{
        height: 94%;
        margin-top: 10px;
      }
    }
  }
}
</style>